<template>
  <div class="servicePageOrderList padding_20">
    <el-input v-model="param.userName"
              placeholder="请输入用户"
              class="w-200"
              @clear="handleQuery"
              clearable />
    <el-input v-model="param.doctorName"
              placeholder="请输入医生"
              class="w-200"
              @clear="handleQuery"
              clearable />
    <el-input v-model="param.doctorPhone"
              placeholder="请输入医生电话"
              class="w-200"
              @clear="handleQuery"
              clearable />
    <el-select v-model="param.orderStatus"
               placeholder="请选择订单状态"
               filterable
               @change="handleQuery"
               clearable
               class="w-200">
      <el-option v-for="(status, index) in orderStatus"
                 :value="status.code"
                 :key="index"
                 :label="status.name"></el-option>
    </el-select>
    <el-select v-model="param.serviceType"
               placeholder="请选择订单类型"
               filterable
               @change="handleQuery"
               clearable
               class="w-200">
      <el-option :value="0"
                 label="单次咨询"></el-option>
      <el-option :value="14"
                 label="一元问诊"></el-option>
    </el-select>
    <el-datePicker type="daterange"
                   v-model="startTime"
                   value-format="yyyy-MM-dd"
                   class="datePicker_1"
                   @change="handleQuery"
                   start-placeholder="起始日期"
                   end-placeholder="截止日期"></el-datePicker>
    <el-button type="primary"
               @click="handleQuery">查 询</el-button>
    <el-button type="primary"
               @click="servicePackageExport(param)">导 出</el-button>
    <Table :columns="tableCol"
           :data="tableData"
           stripe
           border
           class="mt-20">
      <template slot-scope="{row}"
                slot="action">
        <span @click="handleView(row)">详细</span>
      </template>
    </Table>
    <page @getList="_getList"
          :pageTotal="pageTotal"
          ref="page"></page>
  </div>
</template>

<script>

  import Page from '@/base/page/page'
  import { mapGetters } from 'vuex'
  import { orderMgt } from '@/api/codeName'
  export default {
    name: "servicePageOrderList",
    data () {
      return {
        startTime: [],
        tableCol: [
          {
            type: 'index2',
            title: '',
            width: 60,
            render: (h, params) => {
              return h('span', params.index + (this.page.pageIndex) * this.page.pageSize + 1);
            }
          },
          {
            title: '用户',
            key: 'nickName',
            render: (h, params) => {
              return h('span', params.row.userDto.nickName);
            }
          },
          {
            title: '订单编号',
            key: 'orderNumber'
          },
          {
            title: '订单名称',
            key: 'tradeName'
          },
          {
            title: '订单来源',
            key: 'channelName'
          },
          {
            title: '医生',
            key: 'nickName',
            render: (h, params) => {
              return h('span', params.row.doctorDto.nickName);
            }
          },
          {
            title: '医生电话',
            key: 'loginName',
            render: (h, params) => {
              return h('span', params.row.doctorDto.loginName);
            }
          },
          {
            title: '金额（元）',
            key: 'money',
          },
          {
            title: '剩余次数',
            key: 'effectiveCount'
          },
          {
            title: '合计次数',
            key: 'count',
          },
          {
            title: '订单类型',
            key: 'orderType',
            render: (h, params) => {
              //   for (let i = 0; i < orderMgt.servicePageOrderMgt.orderType.length; i++) {
              //     if (params.row.orderType == orderMgt.servicePageOrderMgt.orderType[i].code) {
              return h('span', params.row.serviceType == 14 ? '一元问诊订单' : '单次咨询问诊订单');
              // }
              // }
            }
          },
          {
            title: '订单状态',
            key: 'orderStatus',
            render: (h, params) => {
              for (let i = 0; i < orderMgt.servicePageOrderMgt.orderStatus.length; i++) {
                if (params.row.orderStatus == orderMgt.servicePageOrderMgt.orderStatus[i].code) {
                  return h('span', orderMgt.servicePageOrderMgt.orderStatus[i].name);
                }
              }
            }
          },
          {
            title: '创建时间',
            key: 'createTime',
            width: 150,
            render: (h, params) => {
              return h('span',
                this.commonFunction.timestampFormat(new Date(params.row.createTime), 'yyyy-MM-dd hh:mm'));
            }
          },
          {
            title: '操作',
            slot: 'action',
            align: 'center'
          }
        ],
        tableData: [],
        pageTotal: 0,       //总条数
        wdStudioTypeList: [],
        hospitalList: [],
        loading: false,
        param: {
          userName: '',
          doctorName: '',
          doctorPhone: '',
          userPhone: '',
          orderStatus: '',
          startTime: '',
          endTime: '',
          serviceType: 0
        },
        orderStatus: orderMgt.servicePageOrderMgt.orderStatus
      }
    },
    mounted () {
      if (this.params.singleOrderMgt) {
        this.param = this.params.singleOrderMgt
      } else {
        this.$store.commit('SET_PARAMS', { singleOrderMgt: this.param })
      }
      this._getList()
    },
    methods: {
      handleQuery () {
        if (this.startTime) {
          this.param.startTime = this.startTime[0]
          this.param.endTime = this.startTime[1]
        } else {
          this.param.startTime = null
          this.param.endTime = null
        }
        this.page.pageIndex=0
        this._getList()
      },
      handleView (row) {
        this.$router.push({ name: 'singleOrderView', query: { id: row.id } })
      },
      _getList () {
        this.ajax({
          type: this.api.singleOrderList.type,
          url: this.api.singleOrderList.url,
          data: Object.assign({}, this.page, this.param),
          success: (data) => {
            this.tableData = data.object
            this.pageTotal = data.totalNum
            this.$previewRefresh()
          },
          error: (data) => {
            this.$Message.error(data.message);
          }
        })
      },
      servicePackageExport (param) {
        param.startTime = this.commonFunction.timestampFormat(new Date(param.startTime), 'yyyy-MM-dd');
        param.endTime = this.commonFunction.timestampFormat(new Date(param.endTime), 'yyyy-MM-dd');
        let paramStr = '';
        for (let key in param) {
          paramStr += key + '=' + param[key] + '&'
        }
        window.location.href = this.api.orderExport.url + '?' + paramStr
      }
    },
    computed: {
      ...mapGetters([
        'page',
        'params'
      ])
    },
    components: {
      Page
    }
  }
</script>

<style lang="scss" type="text/scss" rel="stylesheet/scss">
  .servicePageOrderList {
  }
</style>
